<script setup lang="ts">
// VUE2:  this.$refs.h1Ref  ----> 获取 DOM
import { ref } from 'vue';

// VUE3：
// 1. h1Ref = ref(null) 声明了 DOM 变量
// 2. <h1 ref="h1Ref"> 绑定到实际元素中
// 3. 点击时候修改内容的值
// 4. 手动告诉 提示, 我是什么类型 ref<null | HTMLHeadingElement>
// document.createElement("h1")
const h1Ref = ref<null | HTMLHeadingElement>(null)

// 1. 直接判断，不是 null 就进入代码段 赋值
// 2. 可选链操作符(?.)   ----->  读取到数据，有该属性就返回值，没有该属性，也不错报，返回 undefined
// 注意:只能读取到值，不能赋值
// 3. 非空断言(!.)： 直接告诉 TS ，这个属性不会是空

const getH1 = () => {
    // if (h1Ref.value) {
    //     h1Ref.value.innerHTML = '哈哈'
    // }
    console.log(h1Ref.value?.innerHTML);

    h1Ref.value!.innerHTML = '哈哈'
}

</script>

<template>
    <h1 ref="h1Ref">Hello vue3</h1>
    <button @click="getH1">点我获取H1元素</button>
</template>

<style scoped>
</style>